<template>
  <div class="city-list-item" @click="handleCitySkip">
    {{ item.name }}
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  methods: {
    handleCitySkip() {
      this.$router.push(`/city/${this.item.id}`)
    }
  }
};
</script>
<style lang="less" scoped>
.city-list-item {
  width: 25%;
  padding: 13px 0;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  text-align: center;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis; 
}
</style>